<% include header_index.html %>

<style>

    .header{
        width: 100vw;
        background: white;
    }
    .header_div{
        width: 355px;
        margin: 0 auto;
    }
    .header_div img{
        width: 20px;
        height:20px;
        margin-top: 12px;
    }
    .header_div p{
        font-size: 15px;
        color: #181818;
        line-height: 44px;
        text-align: center;
    }
    .weui-navbar{
        overflow: scroll;
        height:44px;
        padding-left: 10px;
        background: white;
    }
    .weui-navbar__item.weui-bar__item--on{
        background: white;
        color: #ff8000;
    }
    .weui-navbar__item{
        width: 80px;
    }
    .weui-navbar__item:after{
        border: none;
    }
    .weui-navbar:after{
        border:none;
    }
    .weui-navbar__item{
        color: #181818;
        font-size: 13px;
    }
    body{
        background: rgb(243,243,243);
    }
    .weui-navbar__item img{
        height:4px;
        display: none;
    }
    .weui-bar__item--on img{
        display: block;
        margin: 0 auto;
        margin-top: 7px;
    }
    .weui-tab__bd{
        width: 100vw;

    }
    .weui-tab{

    }
    .hide1{
        width: 327px;
        float: left;
        height: 44px;
        overflow: hidden;
    }
    .hide{
        width: 100vw;
        overflow:hidden;
        overflow: scroll;
        height:44px;

    }
    ::-webkit-scrollbar {/*隐藏滚轮*/
        display: none;!important;
    }
    .show{
        width: 1200px;
        height:44px;
    }
    .categroy{
        width:68px;
        margin-left: 20px;
        height: 44px;
        line-height: 44px;
        float: left;
        text-align: center;
        font-size: 13px;
        color: #181818;

    }
    .rq{
        background: white;
        height: 44px;
        width: 100vw;
    }
    .selected{
        font-size: 13px;
        color: #ff8000;
    }
    .categroy img{
        height: 4px;
        position: relative;
        top: -4px;
        margin: 0 auto;
        display: none;
    }
    .selected img{
        display: block;
    }
    .down{
        float: left;
        height:15px;
        margin: 14.5px 16.5px;
    }
    .down_div{
        float: left;
        width:48px;
        height: 44px;
    }



    /*自己的了*/
    .goods_list_div{
        width: 100vw;
        height:auto;

    }
    .goods_div{
        width: 172px;
        height:272px;
        float: left;
        background: white;
        margin-left: 10px;
        margin-top: 10px;
        border-radius: 6px;
        overflow: hidden;
    }
    .goods_file1{
        width: 172px;
        height:172px;
        float: left;
    }
    .goods_div_buttom{
        width: 172px;
        height:100px;

        float: left;
    }
    .goods_name{
        width: 152px;
        margin: 0 auto;
        height:50px;
        line-height: 25px;
        font-size: 15px;
        color: black;
    }
    .goods_price{
        width: 152px;
        margin: 0 auto;
        height:60px;
        line-height: 60px;
        font-size: 15px;

        color: #b80a2f;
    }
</style>
<div class="big_div">
    <div class="h44 header">
        <div class="header_div h44">
            <img src="images/default_wap/return.png" class="back fl" alt="">
            <img src="images/default_wap/moreblack.png" class="back fr" alt="">
            <p>
                商品分类
            </p>
        </div>
    </div>


    <div class="rq">
        <!-- 容器 -->
        <div class="weui-tab">
            <div class="hide1">
                <div class="hide">
                    <div class="show" >
                        <div class="categroy"  v-if="!down" v-bind:class="{selected:select==0}" v-on:click="get_cate(-1,0)">
                            全部
                            <img src="images/default_wap/select.png" alt="">
                        </div>
                        <div class="categroy" v-for="(cate,index) in cates" v-if="!down" v-bind:class="{selected:select==index+1}"  v-on:click="get_cate(index,cate.uid)">
                            {{cate.category_name}}
                            <img src="images/default_wap/select.png" alt="">
                        </div>

                        <div class="categroy" v-if="down">全部分类</div>
                    </div>
                </div>
            </div>
            <div class="down_div"><img class="down" src="images/default_wap/down.png" alt=""></div>
        </div>

    </div>
    <!--滚动栏-->

    <div class="goods_list">
        <div class="goods_div" v-for="goods in goods_list">
            <a v-bind:href="'union/product?setp=1&uid='+goods.uid">
            <img class="goods_file1" src="images/default_wap/load.png" v-bind:data-src="'http://www.phmall.com.ph/union/'+goods.goods_file1" alt="">
            <div class="goods_div_buttom">
                <p class="goods_name sl2">{{goods.goods_name}}</p>
                <p class="goods_price sl1">₱ {{goods.goods_sale_price}}</p>
            </div>
            </a>
        </div>

    </div>
    <!--商品列表-->
    <div class="weui-loadmore">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
    <!--加载样式-->
</div>

<script>
    var page = new Vue({
        el: '.big_div',
        data: {
            select:0,
            down:false,
            index:0,
            cates:[],
            goods_list:[],
            cat:'<%= cat %>'
        },
        methods:{
            get_cate:function (index,cate_uid) {
                this.select=index+1;
                this.cat=cate_uid;
                start=0;
                $.post('./category/get_goods',{start:start,cat:page.cat},function (result) {
                    result=result.data;
                    if(result.length>0)
                    {

                        page.goods_list=[];
                        result.forEach(function (item,index) {
                            page.goods_list.push(item);
                            start++;
                        })
                    }
                    else
                    {
                        $.modal({
                            title: "警告",
                            text: "已經沒有了",
                            buttons: [
                                { text: "確定"}
                            ]
                        });
                    }
                });
            },

        }
    });
    $.post("./category",{},function (result) {
        console.log('aaaa');
        console.log(result);
        result=result.data;
        page.cates=result;
        if(page.cat>0)
        {
            result.forEach(function (item,index) {
                if(item.uid==page.cat)
                {
                    page.select=index+1;
                }
            }) 
        }
    });
    var start=0;

    $.post('./category/get_goods',{start:start,cat:page.cat},function (result) {
        result=result.data;
        if(result.length>0)
        {
            page.goods_list=[];
            result.forEach(function (item,index) {
                page.goods_list.push(item);
                start++;
            })
        }
        else
        {
            $.modal({
                title: "警告",
                text: "已經沒有了",
                buttons: [
                    { text: "確定"}
                ]
            });
        }
    });
</script>


<script>
    $(document.body).infinite();
    var loading = false;  //状态标记
    $(document.body).infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        setTimeout(function() {
            //加载处理
            $.post('./category/get_goods',{start:start,cat:page.cat},function (result) {
                result=result.data;
                if(result.length>0)
                {
                    result.forEach(function (item,index) {
                        page.goods_list.push(item);
                        start++;
                    })
                }
                else
                {
                    $.modal({
                        title: "警告",
                        text: "已經沒有了",
                        buttons: [
                            { text: "確定"}
                        ]
                    });
                }

            });
            // 加载处理
            loading = false;
        }, 1500);   //模拟延迟
    });
//    滚动加载
</script>




<!--底部栏-->
<% include footer.html %>
